.motion-to-top, .motion-to-left, .motion-to-right, .motion-to-bottom{ display: inline-block; position: relative; transition: color .2s; z-index: 10; }
.motion-to-top::before, .motion-to-left::before, .motion-to-right::before, .motion-to-bottom::before{ content: ''; position: absolute; width: 0; height: 0; background-color: var(--theme); transition: width .2s, height .2s; z-index: -1; }
.motion-to-top::before, .motion-to-bottom::before{ left: 0; width: 100%; }
.motion-to-left::before, .motion-to-right::before{ height: 100%; bottom: 0; }
.motion-to-top::before{ bottom: 0; }
.motion-to-bottom::before{ top: 0; }
.motion-to-left::before{ right: 0; }
.motion-to-right::before{ left: 0; }
.motion-to-top:hover, .motion-to-left:hover, .motion-to-right:hover, .motion-to-bottom:hover{ color: #fff; }
.motion-to-top:hover::before, .motion-to-bottom:hover::before{ height: 100%; }
.motion-to-left:hover::before, .motion-to-right:hover::before{ width: 100%; }